<template>
	<view>
		<view class="page-head flex-box" v-if="false">
			<view class="item" :class="{'active': tabIdx == 0}" @click="tabClick(0)">楼盘</view>
			<!-- <view class="item" :class="{'active': tabIdx == 1}" @click="tabClick(1)">租房</view> -->
		</view>
		<view class="container">
			<template v-if="tabIdx==0&&houseList.total > 0">
				<view class="houselist">
					<template v-for="(item, index) in houseList.data">
						
						<view class="houseitem flex" v-if="item.type == 1" @click="goToDe(item)">
							<image :lazy-load="true" :src="item.house.image_text" class="houseimg" mode="aspectFill">
							</image>
							<view class="flex-grow-1">
								<view class="flex-box">
									<view class="housename m-ellipsis flex-grow-1 fwb">{{item.house.name}}</view>
									<view class="sale_type1" v-if="item.house.house_type_id==16">
										<text>新房</text>
									</view>
									<view class="sale_type1" v-if="item.house.house_type_id==1">
										<text>二手房</text>
									</view>
									<view class="sale_type1" v-if="item.house.house_type_id==18">
										<text>商铺</text>
									</view>
								</view>
								
								<view class="area-size">
									
									<text class="pr20">{{ item.house.list_labels?item.house.list_labels:'' }}</text>
									<text v-if="false">| {{ item.house.alias_name ? item.house.alias_name : '' }}</text>
									
									<text>建面{{ item.house.min_space }}㎡</text>
								</view>
								<view class="targetbox flex flex-wrap">
									<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr">
										{{ targets }}
									</view>
									<view v-if="item.house.rank_json_text" class="number_one">
										<image src="/static/icon/icon_reward.png" class="icon_reward"></image>
										<view>{{ item.house.rank_json_text }}</view>
									</view>
								</view>
								<view class="housecost fwb">
									<!-- 新房 -->
									<text class="pr20" v-if="item.house.house_type_id==16">{{ item.house.price }}万</text>
									<!-- 二手房 -->
									<text class="pr20" v-if="item.house.house_type_id==1">{{ item.house.price }}万</text>
									{{ item.house.first_price_msg ? item.house.first_price_msg : '' }}
									<text class="junjia" v-if="item.house.house_type_id==1">{{item.house.unit_price}}元/平</text>
									<!-- 商铺 -->
									<text class="pr20" v-if="item.house.house_type_id==18">{{ item.house.price }}万</text>
									<text class="junjia" v-if="item.house.house_type_id!=1">{{item.house.unit_price}}元/平(参考均价)</text>
								</view>
								
								<view class="area-size" v-if="item.house.house_type_id==16">
									<text class="pr20">楼盘地址</text>
									<text style="color:#000;"> {{ item.house.region + item.house.addr}}</text>
								</view>
								<view class="flex-box flex-between" style="margin-top:5rpx;">
									
									<view class="flex-box" @tap.stop.prevent="cancelcollect" :id="index">
										<image src="/static/icon/icon_collect-on.png" class="icon_collect">
										</image>
										<view class="fs24 col89">取消关注</view>
									</view>
								</view>
							</view>
						</view>
						<navigator class="houseitem flex" v-else
							:url="'/pages/house/huxing_detail/huxing_detail?id=' + item.houselayout.id">

							<image class="houseimg" v-if="item.houselayout.images_arr.length > 0" :lazy-load="true"
								:src="item.houselayout.images_arr[0]" mode="aspectFill"></image>
							<view class="flex-grow-1">
								<view class="housename single-line">{{ item.houselayout.name }}</view>
								<view class="area-size flex-box flex-between">
									建面：{{ item.houselayout.space }}㎡
								</view>

								<view class="flex-box flex-between">
									<view class="housecost">
										<text class="fs24 col89">总价：</text>
										约
										<text class="fs34">{{ item.houselayout.total_price }}</text>
										万
									</view>
									<view class="flex-box" @tap.stop.prevent="cancelcollect" :id="index">
										<!-- <image src="../../static/icon/icon_collect-on.png" class="icon_collect"
											v-if="item.collect"></image>
										<image src="../../static/icon/icon_collect.png" class="icon_collect" v-else>
										</image>
										<view class="fs24 col89" @click="collect">{{item.collect?'取消关注':'关注房型'}}
										</view> -->
										<image src="/static/icon/icon_collect-on.png" class="icon_collect">
										</image>
										<view class="fs24 col89">取消关注</view>
									</view>
								</view>
							</view>
						</navigator>

					</template>
					<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉" nomore-text="没有更多了" />
				</view>


			</template>
			
			<template v-else-if="tabIdx==1 && houseList.total > 0">
				<view class="source_list">
					<navigator :url="'/pages/rental/renting/renting?id=' + item.id" class="order_item flex-box ptb30" v-for="(item, index) in houseList.data">
						<view class="source_item flex-box flex-grow-1">
							<image :lazy-load="true" :src="item.image" mode="aspectFill"></image>
							<view class="flex-grow-1">
								<view class="m-ellipsis fs30 col10 mb15">{{item.name}}</view>
								<view class="area-size col89 fs24 pb15">
									<text>{{item.village2.prov}} | {{item.village2.region}}</text>
									<text>{{item.space}}㎡</text>
								</view>
								<view class="flex-box">
									<view class="targets" v-for="tag in item.house_tag_ids_text_arr">{{tag.tag.name}}</view>
								</view>

								<view class="flex-box flex-between">
									<view class="price">¥<text>{{item.price}}</text>/月</view>
									<view class="flex-box" @tap.stop.prevent="cancelcollect" :id="index">
										<image src="/static/icon/icon_collect-on.png" class="icon_collect">
										</image>
										<view class="fs24 col89">取消收藏</view>
									</view>
								</view>

							</view>
						</view>
					</navigator>


				</view>
				<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉" nomore-text="没有更多了" />
			</template>
			<template v-else>
				<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
				</u-empty>
			</template>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				// 房源列表
				houseList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},

				targets: [],
				loadStatus: 'loadmore', //加载状态
				tabIdx: 0
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let that = this;
			this.now_city = uni.getStorageSync('now_city') || '上海市';
			this.initData();
			
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {
			if (this.houseList.current_page >= this.houseList.last_page) {
				// functions.toast('已加载到底部了');
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getHouseList();
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		methods: {
			cancelcollect(e) {
				var that = this;
				let index = e.currentTarget.id;
				let data = this.houseList.data;
				if(that.tabIdx == 0){
					if (data[index].type == 1) {
						var json = {
							house_id: data[index].house_id,
							type: 1
						};
					} else {
						var json = {
							house_id: data[index].house_id,
							house_layout_id: data[index].house_layout_id,
							type: 2
						};
					}
				}else{
					var json = {
						rental_id: data[index].id
					};
				}
				
				app.globalData.nowThat = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						let url = that.tabIdx == 0? '/api/xiluhouse/house/collect_house' : '/api/xiluhouse.rental/toggle_collection';
						functions.submitAjaxData(that, url, json, function(res) {
							data.splice(index, 1);
							that.houseList.data = data;

						});
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 获取房源列表信息
			getHouseList: function() {
				var that = this;
				var json = {
					city: that.now_city
				};
				json.page = Number(that.houseList.current_page) + 1;

				if (json.page > 1 && that.houseList.current_page >= that.houseList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				let url = that.tabIdx == 0? '/api/xiluhouse/House/my_collect_list' : '/api/xiluhouse.user/my_collection_list';
				functions.getAjaxList(that, url, json, function(res) {
					var houseList = res.data;

					if (json.page > 1) {
						var now_houseList_data = that.houseList.data || [];
						var now_houseList_data = now_houseList_data.concat(houseList.data);
						houseList.data = now_houseList_data;
					}

					that.houseList = houseList;

				});
			},
			
			

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.houseList.current_page = 0;
				// 获取该城市的房源列表

				that.getHouseList();
			},
			tabClick(i) {
				this.tabIdx = i;
				this.initData();
			},
			
			goToDe(event){
				console.log(event);
				console.log('详情id:'+event.house.id);
				console.log('新房:'+event.house.house_type_id);
				
				if (event.house.house_type_id==16) {
					//新房 = 16
					uni.navigateTo({
						url: '/pages/house/building_detail_news/building_detail_news?id='+event.house.id
					});
				} else if(event.house.house_type_id==1) {
					// 二手房 = 1
					uni.navigateTo({
						url: '/pages/house/building_detail/building_detail?id='+event.house.id
					});
				}else{
					// 其他
					uni.navigateTo({
						url: '/pages/house/building_detail/building_detail?id='+event.house.id
					});
				}
				
			},

		}
	};
</script>

<style lang="scss">
	.container {
		padding-top: 100rpx;
	}

	.page-head {
		justify-content: space-evenly;

		.item {
			position: relative;
			padding: 0 50rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
		}

		.item.active {
			font-weight: bold;
			color: var(--normal);
		}
	}

	.houselist {
		padding: 30rpx 40rpx;
	}

	.houselist .houseitem {
		padding-bottom: 30rpx;
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: 24rpx;
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: var(--blue);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: #f8532f;
		font-size: 24rpx;
	}

	.houselist .housecost text {
		font-size: 34rpx;
	}

	.houselist .housecost .junjia{
		font-size: var(--fs24);
		color: #999;
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: 18px;
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00C4FF, var(--blue));
		color: #fff;
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #FF6635, #FFB45C);
		color: #fff;
		margin-right: 10rpx;
	}

	.houselist .icon_collect {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}




	.source_list {
		position: relative;
		z-index: 1;

		.order_item {
			padding: 30rpx;
			border-bottom: 15rpx solid #F7F9FC;

			.icon-check {
				padding: 5rpx 30rpx 5rpx 0;
				display: block;
				width: 66rpx;
				height: 45rpx;
			}

			.source_item {
				line-height: 1.3;

				image {
					display: block;
					width: 240rpx;
					height: 190rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.area-size {
					text+text {
						margin-left: 40rpx;
					}
				}

				.targets {
					padding: 2rpx 4rpx;
					background: #cce9ff;
					font-size: var(--fs18);
					color: var(--normal);
					border-radius: 2rpx;
					margin-right: 10rpx;
					margin-bottom: 12rpx;
				}

				.price {
					color: var(--red);
					font-size: 24rpx;

					text {
						font-size: 34rpx;
					}
				}

				.icon_collect {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
